<template>
    <div class="all" ref="scrl">
        <ul class="content" >
            <li v-for="item in list" :key="item.ids">
                <!-- 判断是否是编辑 点击编辑时不跳转 -->
                <router-link :to="hid==true ? '' : `/user/mycard/${item.ids}`"  >
                    <div class="top">
                        <span>{{item.cinema}} ></span>
                        <span>{{item.tips}}</span>
                    </div>
                    <div class="center">
                        <img :src="item.imgs" alt="">
                        <div class="right">
                            <h3>
                                <span>{{item.title}}</span>
                                <span>{{item.num}}张</span>
                            </h3>
                            <p>{{item.time}}</p>
                            <p>{{item.address}}</p>
                        </div>
                        <van-button round v-show="hid" type="danger" @click="del(item.ids)">删除</van-button>
                    </div>
                    <p>总票价: {{item.num*item.price}}元</p>
                </router-link>
            </li>
            
        </ul>
    </div>
</template>

<script>
import { Dialog } from 'vant';

import BScroll from '@better-scroll/core'
export default {
    props:["hid"],
    data() {
        return {
           
        };
    },
    computed: {
        list(){
            return this.$store.state.orderList
        }
    },
    created() {
        
    },
    mounted() {
        //插件初始化
        let wrapper = this.$refs.scrl
        this.bScroll = new BScroll(wrapper,{
            click:true
        })
    },
    methods: {
        //添加内容时刷新页面 执行动画
        refresh(){
            this.$nextTick(()=>{
                this.bScroll.refresh();
            })
        },
        del(val){
            var item = this.$store.state.orderList.findIndex(ele => ele.ids == val)
            // console.log(val,item)
            Dialog.confirm({
                // title: '标题',
                message: 'Are You Sure Delete?',
                confirmButtonText:"Yes",
                confirmButtonColor: "#0e47b1",
                cancelButtonText:"No",
                cancelButtonColor:"#929693",
            })
            .then(() => {
                this.$store.commit('del',item)
                //自定义事件修改父类值 按钮隐藏
                this.$emit("childevent",this.hid)

            })
            .catch(() => {
                //自定义事件修改父类值
                this.$emit("childevent",this.hid)
            });
                
        }
    },
};
</script>
<style lang="scss" >
.van-button--round{
    height: 30px;
    margin-left: 20px;
}
a{
    color: white!important;
}
</style>
<style scoped lang="scss">
.all{
    height: 700px;
    z-index:2;
    ul{
        li{
            height: 161px;
            padding: 5px 10px;
            background-color: #33363D;
            margin: 20px auto;
            .top{
                display: flex;
                margin: 10px 0;
                justify-content: space-between;
            }
            .center{
                display: flex;
                align-items: center;
                img{
                    width:70px;
                    height:81px;
                    margin-right: 10px;
                }
                .right{
                    text-align: left;
                    h3{
                        width: 155px;
                        font-weight: normal;
                        font-size:14px;
                        margin: 5px auto ;
                        :last-child{
                            float: right;
                        }
                    }
                    p{
                        margin: 1px 0;
                        color: grey;
                    }
                }
            }
            p{
                text-align: left;
                margin: 10px 0;
                color: grey;
            }
        }
    }
}
</style>
